<template>
  <div class="home">
    <mt-header fixed title="XXX报名表"></mt-header>
    <div class="baoming_contanier">
      <span class="basic_title">基本信息</span>
      <div class="basic_info">
        <mt-field label="姓名(中)" placeholder="请输入姓名" v-model="info.name"></mt-field>
        <mt-field label="姓名(Eng)" placeholder="请输入姓名" v-model="info.f_name"></mt-field>
        <mt-field label="身高(cm)" placeholder="请输入身高" v-model="info.height"></mt-field>
        <mt-field label="体重(kg)" placeholder="请输入体重" v-model="info.weight"></mt-field>
        <mt-field label="身份证号码" placeholder="请输入身份证号码" v-model="info.id_number"></mt-field>
        <mt-field label="手机号码" placeholder="请输入手机号码" type="tel" v-model="info.phone_number"></mt-field>
        <mt-field label="家庭地址" placeholder="请输入家庭地址" v-model="info.address"></mt-field>
        <mt-field label="学校名称" placeholder="请输入学校名称" v-model="info.s_name"></mt-field>
        <mt-field label="学校地址" placeholder="请输入学校地址" v-model="info.s_address"></mt-field>
        <mt-field label="诊断记录" placeholder="请输入诊断记录" v-model="info.diagnosis"></mt-field>
        <mt-radio title="膳食" v-model="info.meal" :options="['清真', '非清真','素食']"></mt-radio>
        <mt-radio title="性别" v-model="info.sex" :options="['男', '女']"></mt-radio>
        <mt-radio title="是否已婚" v-model="info.marry" :options="['是', '否']"></mt-radio>
        <mt-switch v-model="info.age18">年满18岁</mt-switch>
      </div>
      <transition appear>
        <div class="parent_info" v-show="!info.age18">
          <mt-field label="监护人姓名(中)" placeholder="请输入姓名" v-model="info.p_name"></mt-field>
          <mt-field label="监护人姓名(Eng)" placeholder="请输入姓名" v-model="info.f_p_name"></mt-field>
          <mt-field label="监护人身份证号码" placeholder="请输入身份证号码" v-model="info.p_id_number"></mt-field>
          <mt-field label="监护人手机号码" placeholder="请输入手机号码" v-model="info.p_phone_number"></mt-field>
          <mt-field label="关系" placeholder="请输入关系" v-model="info.relationship"></mt-field>
          <mt-field label="电子邮件" placeholder="请输入电子邮件" type="email" v-model="info.p_email"></mt-field>
          <mt-field label="联系地址" placeholder="请输入联系地址" v-model="info.p_address"></mt-field>
          <mt-radio title="性别" v-model="info.p_sex" :options="['男', '女']"></mt-radio>
        </div>
      </transition>

      <div class="pick_pic">
        <el-upload
          class="upload-demo"
          ref="upload"
          action
          :limit="3"
          :multiple="true"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false"
        >
          <div class="el-upload_header">
            <el-button slot="trigger" size="small" type="danger">选取文件</el-button>
          </div>
          <div slot="tip" class="el-upload__tip">身份证图片,2寸照片+全身照</div>
        </el-upload>
        <span>已选择{{info.img_url.length}}/3</span>
      </div>
    </div>
    <signbox></signbox>
    <mt-button class="submit" type="danger" size="large" @click="upload">提交</mt-button>
  </div>
</template>

<script>
import signbox from "../components/sign";
import Vue from "vue";
import { Toast } from "mint-ui";
export default {
  name: "home",
  components: { signbox },
  data() {
    return {
      fileList: [],
      info: {
        name: "",
        f_name: "",
        s_name: "",
        id_number: "",
        phone_number: "",
        address: "",
        s_address: "",
        height: "",
        weight: "",
        meal: "",
        sex: "",
        diagnosis: "",
        marry: "",
        age: "",
        age18: true,
        p_name: "",
        f_p_name: "",
        p_id_number: "",
        p_phone_number: "",
        p_sex: "",
        p_email: "",
        p_address: "",
        sign_url: "",
        relationship: "",
        img_url: []
      }
    };
  },
  methods: {
    // submitUpload(file) {

    // },
    upload() {
      this.info.sign_url = Vue.prototype.sign_url;
      var myDate = new Date();
      var tYear = myDate.getFullYear();
      //从身份证号提取年龄
      this.info.age = tYear - this.info.id_number.slice(6, 10);
      if (this.info.img_url.length != 3) {
        Toast("当前照片未满3张，请点击列表完成选择");
        return;
      }
      Toast({
        message: "报名信息提交成功",
        position: "center",
        duration: 5000
      });
      console.log(this.info);
    },
    handleRemove(file, fileList) {
      this.getBase64(file.raw).then(res => {
        var index = this.info.img_url.indexOf(res);
        console.log(index);
        if (index > -1) {
          this.info.img_url.splice(index, 1);
        }
        Toast("已取消");
        console.log(this.info.img_url);
      });
      console.log(file, fileList);
    },
    handlePreview(file) {
      var flag = false;
      this.getBase64(file.raw).then(res => {
        //判断选择图片是否重复
        for (var i = 0; i < this.info.img_url.length; i++) {
          if (this.info.img_url[i] === res) {
            Toast("请勿重复选择");
            flag = true;
            return;
          }
        }
        if (flag == false) {
          this.info.img_url = this.info.img_url.concat(res);
          Toast("已选择");
        }

        console.log(this.info.img_url);
      });
    },
    getBase64(file) {
      return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function() {
          imgResult = reader.result;
        };
        reader.onerror = function(error) {
          reject(error);
        };
        reader.onloadend = function() {
          resolve(imgResult);
        };
      });
    }
  }
};
</script>
<style lang="scss">
.baoming_contanier {
  padding-top: 40px;
  .pick_pic {
    margin: 10px 0;
    background-color: #fff;
  }
  .basic_title {
    font-size: 12px;
    margin: 8px 8px;
  }
  .basic_info {
    padding-top: 8px;
  }
}
.submit {
  margin: 10px 0;
}
.mint-switch {
  padding: 10px 0;
}
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateY(80px);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.4s ease;
}
.v-move {
  transition: all 0.6s ease;
}
.v-leave-active {
  position: absolute;
}
</style>

